<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/ichart.1.2.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
	 $(".new_table tr:eq(1)").children("td").find("span").css("background-position","0px 0px")
	 $(".new_table tr:eq(1)").children("td").find("span").css("font-size","10px")
	 $(".new_table tr:eq(2)").children("td").find("span").css("background-position","0px -30px")
     $(".new_table tr:eq(3)").children("td").find("span").css("background-position","0px -60px")
	 $(".new_table tr:eq(13)").children("td").find("span").css("background-position","0px -120px")
	 $(".new_table tr:eq(14)").children("td").find("span").css("background-position","0px -150px")
	 $(".new_table tr:eq(15)").children("td").find("span").css("background-position","0px -180px")
	 
	 $.ajax({ 
   		type: "POST",
   		url:  "objectrankings",
   		dataType: "json",
   		success: function(data){
   			var scoredata = [
			         	{
			         		name : '上月',
			         		value: data.fMonth,
			         		color: '#1385a5'
			         	},
			         	{
			         		name : '本月',
			         		value: data.cMonth,
			         		color: '#c56966'
			         	}
			         ];
   			var chart = new iChart.ColumnMulti2D({
				render : 'canvasDiv',
				data: scoredata,
				labels: data.name,
				label : {
					rotate: -20,
				},
				title : '济宁市消防支队月度大队考核     单位:分',
//				subtitle : '单位:分',
//				footnote : '数据日期：2015-05-05',
				width : 1200,
				height : 350,
				background_color : '#ffffff',
				animation : true,//开启过渡动画
				animation_duration:800,//800ms完成动画
				shadow : true,
				shadow_blur : 2,
				shadow_color : '#aaaaaa',
				shadow_offsetx : 1,
				shadow_offsety : 0,
				legend:{
					enable:true,
					background_color : null,
					border : {
						enable : false
					}
				},
				coordinate:{
					background_color : '#f1f1f1',
					scale:[{
						 position:'left',	
						 start_scale:30,
						 end_scale:100,
						 scale_space:10,
						 listeners:{
								parseText:function(t,x,y){
									return {text:t}
								}
							}
					}],
					width:1000,
					height:260
				},
				sub_option:{
					listeners:{
						/**
						 * r:iChart.Rectangle2D对象
						 * e:eventObject对象
						 * m:额外参数
						 */
						click:function(r,e,m){
// 							alert(r.get('name')+' '+r.get('value') + ' ');
// 							alert(data.id[r.get('id').split("_")[0]]);
							$("#bg").css({
					            display: "block", height: $(document).height()
					        });
					        var $box = $('.box');
					        $box.css({
					            //设置弹出层距离左边的位置
					            left: ($("body").width() - $box.width()) / 2 - 20 + "px",
					            //设置弹出层距离上面的位置
					            top: ($(window).height() - $box.height()) / 2 + $(window).scrollTop() + "px",
					            display: "block"
					        });
						}
					}
				}
		});
		chart.draw();
   		}
	 });
	 
	
	$(function() {
							var data = [ {
								name : '岗位练兵',
								value : 38.0,
								color : '#FF4500'
							}, {
								name : '部队安全管理',
								value : 15.0,
								color : '#EEC900'
							}, {
								name : '正规化建设',
								value : 16.0,
								color : '#E066FF'
							}, {
								name : '视频督查考核',
								value : 10.0,
								color : '#A020F0'
							}, {
								name : '信息化建设',
								value : 10.0,
								color : '#9ACD32'
							}, {
								name : '信息调研',
								value : 11.0,
								color : '#00FFFF'
							}, ];

							var chart = new iChart.Pie3D(
									{
										render : 'chart2',
										title : {
											text : '高新区消防大队个项目考核得分分布',
											color : '#e0e5e8',
											height : 40,
											border : {
												enable : true,
												width : [ 0, 0, 2, 0 ],
												color : '#343b3e'
											}
										},
										padding : '2 10',
// 										footnote : {
// 											text : 'StatCounter Global Stats,design by ichartjs',
// 											color : '#e0e5e8',
// 											height : 30,
// 											border : {
// 												enable : true,
// 												width : [ 2, 0, 0, 0 ],
// 												color : '#343b3e'
// 											}
// 										},
										width : 850,
										height : 400,
										data : data,
										shadow : true,
										shadow_color : '#15353a',
										shadow_blur : 8,
										background_color : '#3b4346',
										gradient : true,
										color_factor : 0.28,
										gradient_mode : 'RadialGradientOutIn',
										showpercent : true,
										decimalsnum : 2,
										legend : {
											enable : true,
											padding : 30,
											color : '#e0e5e8',
											border : {
												width : [ 0, 0, 0, 2 ],
												color : '#343b3e'
											},
											background_color : null,
										},
										sub_option : {
											offsetx : -40,
											border : {
												enable : false
											},
											label : {
												background_color : '#fefefe',
												sign : false,//设置禁用label的小图标
												line_height : 10,
												padding : 4,
												border : {
													enable : true,
													radius : 4,//圆角设置
													color : '#e0e5e8'
												},
												fontsize : 11,
												fontweight : 600,
												color : '#444444'
											}
										},
										border : {
											width : [ 0, 10, 0, 10 ],
											color : '#1e2223'
										}
									});
							chart.bound(0);

							$(".close").click(function() {
								$("#bg,.box").css("display", "none");
							});
						});

					})
</script>
</head>
<body style="background: #f5f5f5">
	<div id="header">
		<div class="header_main">

			<div class="header_left fl">
				<ul>
					<li class="nav_hover"><em class="nav_pic1"></em><a href="#">首页</a></li>
					<li><em class="nav_pic2"></em><a href="#">用户管理</a></li>
					<li><em class="nav_pic3"></em><a href="#">注销账户</a></li>
				</ul>
				<div class="clear"></div>
			</div>

			<div class="header_right fr">
				当前用户：<a href="#" class="header_user">admin</a> <a href="#"
					class="header_pwd">[更换密码]</a> <a href="#" class="header_help">帮助</a>
				<a href="#">退出</a>
			</div>
			<div class="clear"></div>

		</div>
	</div>
	<div class="line30"></div>

	<div class="main">
		<div class="main_block">
			<div class="block_title">
				<h1>考核工作</h1>

				<div class="nav_menu">
					<ul>
						<li class="title_hover" sid="1"><a>折线图</a></li>
						<li sid="2"><a>柱状图</a></li>
						<li sid="3"><a>点图</a></li>
						<li sid="4"><a>饼状图</a></li>
					</ul>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>

			<div class="block block1 block_content" style="display: block;" id="canvasDiv">
			</div>
			<div class="block block2 block_content">
			</div>
			<div class="block block3 block_content">
				3<img src="images/img1.png" />
			</div>
			<div class="block block4 block_content">
				4<img src="images/img1.png" />
			</div>
		</div>
		<div id="bg"></div>
		
		<div class="box" style="display:none">
    		<h2>考核得分分布图<a href="#" class="close">关闭</a></h2>
    		<div id="chart2">
    		</div>
		</div>
		<div class="line30"></div>

		<div class="main_block01">
			<div class="main_block_left fl">
				<div class="news_title">
					<h1>通知公告</h1>
					<a href="#">更多</a>
					<div class="clear"></div>
				</div>
				<div class="main_news">
					<ul class="main_news_list">
						<li>
							<div class="main_news_infor">
								<h3>
									<a href="#">组织开展“实战演练月”活动</a><span>2015-05-13</span>
								</h3>
								<p>各中队每月开展演练不少于8次，每少一次扣0.5分，开展次数少于5次不得分……</p>
							</div>
						</li>
						<li>
							<div class="main_news_infor">
								<h3>
									<a href="#">第一季度火灾形势进行分析</a><span>2015-05-13</span>
								</h3>
								<p>每月对各单位火灾统计系统数据录入情况进行核查，严格杜绝迟报、漏报等现象……</p>
							</div>
						</li>
						<li>
							<div class="main_news_infor">
								<h3>
									<a href="#">开展作战训练安全专项教育</a><span>2015-05-13</span>
								</h3>
								<p>全面开展执勤岗位练兵活动，加强对辖区单位的熟悉演练，修订完善重点单位灭火救援预案，大力开展铁军中队创建……</p>
							</div>
						</li>
						<li>
							<div class="main_news_infor">
								<h3>
									<a href="#">灭火救援实战化练兵活动进行考核</a><span>2015-05-12</span>
								</h3>
								<p>针对全市基层中队灭火救援实战化练兵活动进行业务工作精细化量化汇总考核……</p>
							</div>
						</li>
						<li>
							<div class="main_news_infor">
								<h3>
									<a href="#">开展好部队视频督察日常考核调测工作</a><span>2015-05-12</span>
								</h3>
								<p>每月不定期对部队执勤战备和部队管理情况进行督查，杜绝岗哨、通信室人员不在岗情况（岗哨必须双岗，通信室至少一名通信员）……</p>
							</div>
						</li>
						<li>
							<div class="main_news_infor">
								<h3>
									<a href="#">组织开展部队安全管理工作督查</a><span>2015-05-11</span>
								</h3>
								<p>加强安全管理教育，认真学习条令条例、五条禁令等规章制度，严格遵守执勤、训练等安全规程，会议、学习记录齐全……</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="main_block_right tab_title_border fr"
				style="border-top: 1px #dcdcdc solid;">
				<div class="news_title tab_title_border"
					style="border-left: 1px #dcdcdc solid; border-right: 1px #dcdcdc solid;">
					<h1>安全警示</h1>
					<div class="clear"></div>
				</div>
				<table border="0" width="100%" cellpadding="0" cellspacing="0"
					class="new_table">
					<tr class="tab_title">
						<td>当前排名</td>
						<td>大队名称</td>
						<td>总得分</td>
						<td>审核日期</td>
						<td>排名状态</td>
					</tr>
					<c:forEach items="${targetScoreList}" var="targetScore">
					<tr>
						<td><span>${targetScore.num }</span></td>
						<td>${targetScore.name }</td>
						<td>${targetScore.score }</td>
						<td>2015-05-10</td>
						<td><c:if test="${targetScore.upOrDown == 1}"><em class="pm_up" title="排名上升"></em></c:if>
						<c:if test="${targetScore.upOrDown == 0}"><em class="pm_down" title="排名下降"></em></c:if>
						${targetScore.dValue }</td>
					</tr>
					</c:forEach>
<!-- 					<tr> -->
<!-- 						<td><span>2</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down" title="排名下降"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>3</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down" title="排名下降"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>4</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>5</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down" title="排名下降"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>6</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down" title="排名下降"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>7</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>8</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down" title="排名下降"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>9</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>10</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>11</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>12</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>13</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>14</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_up" title="排名上升"></em>1</td> -->
<!-- 					</tr> -->
<!-- 					<tr> -->
<!-- 						<td><span>15</span></td> -->
<!-- 						<td>高新大队</td> -->
<!-- 						<td>96</td> -->
<!-- 						<td>2015-05-10</td> -->
<!-- 						<td><em class="pm_down"></em>1</td> -->
<!-- 					</tr> -->

				</table>

			</div>
			<div class="clear"></div>
		</div>
		<div class="line60"></div>
	</div>


	<div class="footer">版权信息：济宁市公安消防支队</div>
</body>
</html>
